<template>
  <div>

    <!-- PC 端 -->
    <div class="changeLanguageDiv">
      <el-dropdown trigger="click" placement="top" size="large">
        <svg preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24" class="changeLanguageSvg">
          <path fill="currentColor"
            d="m18.5 10l4.4 11h-2.155l-1.201-3h-4.09l-1.199 3h-2.154L16.5 10h2zM10 2v2h6v2h-1.968a18.222 18.222 0 0 1-3.62 6.301a14.864 14.864 0 0 0 2.336 1.707l-.751 1.878A17.015 17.015 0 0 1 9 13.725a16.676 16.676 0 0 1-6.201 3.548l-.536-1.929a14.7 14.7 0 0 0 5.327-3.042A18.078 18.078 0 0 1 4.767 8h2.24A16.032 16.032 0 0 0 9 10.877a16.165 16.165 0 0 0 2.91-4.876L2 6V4h6V2h2zm7.5 10.885L16.253 16h2.492L17.5 12.885z">
          </path>
        </svg>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item @click="handleToggleLocale('zh-CN')"> 简体中文 </el-dropdown-item>
            <el-dropdown-item @click="handleToggleLocale('zh-TW')"> 繁體中文 </el-dropdown-item>
            <el-dropdown-item @click="handleToggleLocale('en-US')"> English </el-dropdown-item>
            <el-dropdown-item @click="handleToggleLocale('ko-KR')"> 한문 </el-dropdown-item>
            <el-dropdown-item @click="handleToggleLocale('ja-JP')"> 日本語で </el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </div>

    <!-- h5 移动端 -->
    <div class="changeLanguageDivH5">
      <el-dropdown trigger="click" placement="bottom" size="large">
        <svg preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24" class="changeLanguageSvgH5">
          <path fill="currentColor"
            d="m18.5 10l4.4 11h-2.155l-1.201-3h-4.09l-1.199 3h-2.154L16.5 10h2zM10 2v2h6v2h-1.968a18.222 18.222 0 0 1-3.62 6.301a14.864 14.864 0 0 0 2.336 1.707l-.751 1.878A17.015 17.015 0 0 1 9 13.725a16.676 16.676 0 0 1-6.201 3.548l-.536-1.929a14.7 14.7 0 0 0 5.327-3.042A18.078 18.078 0 0 1 4.767 8h2.24A16.032 16.032 0 0 0 9 10.877a16.165 16.165 0 0 0 2.91-4.876L2 6V4h6V2h2zm7.5 10.885L16.253 16h2.492L17.5 12.885z">
          </path>
        </svg>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item @click="handleToggleLocale('zh-CN')"> 简体中文 </el-dropdown-item>
            <el-dropdown-item @click="handleToggleLocale('zh-TW')"> 繁體中文 </el-dropdown-item>
            <el-dropdown-item @click="handleToggleLocale('en-US')"> English </el-dropdown-item>
            <el-dropdown-item @click="handleToggleLocale('ko-KR')"> 한문 </el-dropdown-item>
            <el-dropdown-item @click="handleToggleLocale('ja-JP')"> 日本語で </el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </div>

  </div>
</template>



<script setup>
import { ref } from 'vue'
// 导入 i18n 模块，国际化
import { useI18n } from 'vue-i18n';
import { useUserStore } from "@/stores"

const userStore = useUserStore()
const { locale } = useI18n();

// 切换语言的方法
function handleToggleLocale(value) {
  userStore.setLocale(value)
}

/* -------------------- h5 相关方法 start -------------------- */

// 判断是否为移动端打开页面，是否使用 h5 样式，默认 false 为 PC 端
let isH5 = ref(false);

if (window.matchMedia("(max-width: 600px)").matches) {
  // 在视口宽度小于等于 600 像素时执行的代码

  // console.log('isH5', isH5.value);
  isH5.value = !isH5.value;
  // console.log('isH5', isH5.value);
}

/* -------------------- h5 相关方法 end -------------------- */


</script>

<style lang="less" scoped>
@height60px: 0.6rem;
@testbgc: #ff6a00;
@index-width1024: 80%;
@font-base-color: #000;
@font-color-white: #fff;
@index-font-size: 0.28rem;
@index-max-width-20r: 0.2rem;
@bgcolor: #fff;
@index-max-height-246p: 0.246rem;
@index-height: 0.246rem;
@index-letter-spacing: 1rem;
@index-base-green: #0abe5f;

.changeLanguageDiv {
  width: 0.8rem;
  height: 0.8rem;
  background: @font-color-white;
  border-radius: 10px;
  box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);

  position: fixed;
  right: 0.3rem;
  bottom: 0.6rem;

  display: flex;
  justify-content: center;
  align-items: center;
}

.changeLanguageDiv:hover {
  background: #ecf5ff;
}

.changeLanguageDiv:active {
  background: #b2e6ff;
}

.changeLanguageSvg {
  width: 0.5rem;
  height: 0.5rem;
}

.changeLanguageDivH5 {
  display: none;
}

/*  移动端  */
@media (max-width: 600px) {

  .changeLanguageDiv {
    display: none;
  }

  .changeLanguageDivH5 {
    width: 0.4rem;
    height: 0.4rem;
    background: @font-color-white;
    border-radius: 10px;
    box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);

    display: flex;
    justify-content: center;
    align-items: center;
  }

  .changeLanguageDivH5:hover {
    background: #ecf5ff;
  }

  .changeLanguageDivH5:active {
    background: #b2e6ff;
  }

  .changeLanguageSvgH5 {
    width: 0.25rem;
    height: 0.25rem;
  }

}
</style>